<template>
  <div style="background:#262544;margin:2em;">
		<el-row :gutter="20" style="margin-top: 2em;">
				<el-col v-for="item in topTitleArr" :key="item.text" class="col-xs-1-5 col-sm-1-5 col-md-1-5 col-lg-1-5" style="min-width: 280px; text-align: center;">
					<div :style="{background:item.color}" style="color: white; float: left; width: 100%;min-width: 280px; height: 5em; padding: 1em 0; border-radius: 1em;">
						<div style="float: left; margin-left: 10%; width: 5em; height: 5em; border-radius: 50%;background: white">
								<icon-svg :icon-class="item.img"  :iconStyle="'color:green;width:80%;height:100%'"></icon-svg>
						</div>						
						<div style="float: left; width: 50%;">
							<div style="height: 2.5em; line-height: 2.5em; vertical-align: center;">{{item.title}}</div>
							<div style="vertical-align: center; font-size: 1.5em;"><b>{{item.value}}</b></div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row class="bigTitleCon"style="background: #262544;padding:3em 1em;">
								<el-col :xs="24" :sm="16" :md="16" :lg="16" style="text-align: left;">
									<b style="color: white;margin-left: 1em;">时间：</b>
									<el-radio-group @change="changeTime" text-color="white"  v-model="daySel">
                  <el-radio-button label="3001">今天</el-radio-button>
                  <el-radio-button label="3002">最近七天</el-radio-button>
                  <el-radio-button label="3003">近三十天</el-radio-button>
                </el-radio-group>
							<el-date-picker  @change="onContrast"
                                      type="daterange"
                                      align="right"
                                      unlink-panels
                                      start-placeholder="开始日期"
                                      end-placeholder="结束日期"
                                      style="padding-left:10px"  
                                      v-model="contrastDate" 
                                      :picker-options="contrastDateOption">
              		</el-date-picker>
								</el-col>
						</el-row>
    <!-- 指标 -->
    <div class="tableChartCon">
      <el-row  style="margin: 2rem 0 0 0px" >
        <span style="font-size:1rem;color:white">指标&nbsp;:</span>
        <el-select @change="onSaleChange"  v-model="type" class="tabsTextMargin">
                <el-option v-for="item in dataSourceType" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
        </el-select>
      </el-row>
      <div class="tableCon">
          <chart  ref="saleChart" :option="saleChartOption" />
      </div>
    </div>
    <el-row  style="padding: 2rem 0 0 0px" >
      <p style="font-size:1rem;color:white">各分公司销量走势图</p>
    </el-row>
    <el-row style="margin: 2rem 0 0 0px" class="tableChartCon">
      <el-row style="padding:20px 5px ">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" style="text-align: left">
          <span style="font-size:1rem;color:white">分公司</span>
          <el-select @change="onFactoryOtherChange"  v-model="factoryItem" class="tabsTextMargin">
              <el-option v-for="(itemaa,index) in factoryArr" :key="itemaa.id" :label="itemaa.name" :value="itemaa.id">
              </el-option>
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" style="text-align: left">
        <span style="font-size:1rem;color:white">指标</span>
        <el-select  @change="chagneNormalItem" v-model="normalItem" class="tabsTextMargin">
                <el-option v-for="item in normalArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
        </el-select>
        </el-col>
      </el-row>
        
      <el-col :xs="24" :sm="12" :md="14" :lg="16" style="text-align: left">
        <div class="tableCon">
            <chart  ref="factoryChart" :option="factoryChartOption" />
         </div>
      </el-col>
      <el-col  :xs="24" :sm="12" :md="10" :lg="8" class="factoryTabClass" style="text-align: left">
          <el-tabs @tab-click="onTabs" v-model="activeName" type="border-card">
            <el-tab-pane label="按销量" >
                <el-row class="corcleCon" v-for="(value,index) in saleMoneyArr" :key="index">
                    <div class="corcleNum" :style="'background:'+value.color">
                      {{index +1 }}
                    </div>
                    <span style="float:left;color:white;float: left;color: white;margin-left: 10px;">{{value.xData}}</span> 
                    <div style="float:right;color:white;">
                    {{value.value}}吨 <span style="float:right">
                      <icon-svg icon-class="up" :iconStyle="'color:white;width:10px'"></icon-svg>
                      </span>
                    </div>
                </el-row>
            </el-tab-pane>
            <el-tab-pane  label="按订单量">
              <el-row class="corcleCon" v-for="(value,index) in saleMoneyArr" :key="index">
                    <div class="corcleNum" :style="'background:'+value.color">
                      {{index +1}}
                    </div>
                    <span style="float:left;color:white;float: left;color: white;margin-left: 10px;">{{value.xData}}</span> 
                    <div style="float:right;color:white;">
                    {{value.value}}单<span style="float:right">
                      <icon-svg icon-class="up" :iconStyle="'color:white;width:10px'"></icon-svg>
                      </span>
                    </div>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="按金额">
              <el-row class="corcleCon" v-for="(value,index) in saleMoneyArr" :key="index">
                    <div class="corcleNum" :style="'background:'+value.color">
                      {{index +1}}
                    </div>
                    <span style="float:left;color:white;float: left;color: white;margin-left: 10px;">{{value.xData}}</span> 
                    <div style="float:right;color:white;">
                    {{value.value}}元 <span style="float:right">
                      <icon-svg icon-class="up" :iconStyle="'color:white;width:10px'"></icon-svg>
                      </span>
                    </div>
                </el-row>
            </el-tab-pane>
          </el-tabs>
      </el-col>
    </el-row>
  </div>

</template>
<script>
import echarts from "echarts";
require("echarts/map/js/china.js");
import chart from "../../../../components/Charts/chart";
export default {
  data() {
    return {
      contrastDate: "",
      contrastDateOption: "",
      contrast: false,
      showFiltBool: false,
      saleMoneyArr: [
        {
          name: "郑州分公司",
          id: "1",
          color:'#FE6668',
          value: "123456"
        },
        {
          name: "西南分公司",
          id: "2",
          color:'#FEAA40',
          value: "123456"
        },
        {
          name: "洛阳分公司",
          id: "3",
           color:'#0386d1',
          value: "123456"
        },
        {
          name: "广州分公司",
          id: "4",
          color:'#403F61',
          value: "123456"
        },
        {
          name: "西安分公司",
          id: "5",
          color:'#403F61',
          value: "123456"
        },
        {
          name: "无锡分公司",
          id: "6",
          color:'#403F61',
          value: "123456"
        }
      ],
      normalItem: "5001",
      normalArr: [
        {
          label: "销量",
          value: "5001"
        },
        {
          label: "订单量",
          value: "5002"
        },
        {
          label: "金额",
          value: "5003"
        },
      ],
      normalFactoryParams:{
        startTime:'',
        endTime:'',
        timeType:'3001',
        queryType:'5001',
      },
      factoryItem:"0",
      factoryItemId:"0",
      factoryArr: [],
      saleChartOption: {},
      type: "5001",
      dataSourceType: [
        {
          label: "销量",
          value: "5001"
        },
        {
          label: "金额",
          value: "5003"
        },
        {
          label: "商家",
          value: "5004"
        }
      ],
      daySel: "3001",
      topDate: new Date(),
      topTitleArr: [
        {
          title: "累计订单数(单)",
          value: 2222,
          img: "hehuoren",
          color: "#34ae73"
        },
        {
          title: "累计销量(吨)",
          value: 2222,
          img: "baobeikehu",
          color: "#0386d1"
        },

        {
          title: "累计成交金额(万元)",
          value: 2222,
          img: "renshu",
          color: "#feaa40"
        },
        {
          title: "累计商家(家)",
          value: 33333,
          img: "yongjin",
          color: "#f86f39"
        },
        {
          title: "累计会员(家)",
          value: 245543,
          color: "#fa4361",
          img: "yongjin"
        }
      ],
      activeName:'0',
      targetName:'',
      detailListParams:{
        startTime:'',
        endTime:'',
        timeType:'3001',
        queryType:'5001',
        timeAccuracy:'4001',
        shopId:''
      },
    };
  },
  components: {
    chart
  },
  watch: {},
  methods: {
    getRanking(params){
          var self = this
          var url = this.$api.MVKJGetShopDetailList 
          this.$fetch({
              url: url,
              method: 'post',
              data: self.$qs.stringify(params)
            }).then(resData => {
              var data = resData.data.result
              this.$set(this,"saleMoneyArr",data)
              // data
            }).catch(err => {
              console.log(err)
            });
    },
    onTabs(res){
        var params = {
          timeType:'3001',
          queryType:'5001'
        }
        if(res === '0'){
          params.queryType = '5001'
        }else if(res === '1'){
          params.queryType = '5002'
        }else if(res === '2'){
          params.queryType = '5003'
        }
        this.getRanking(params)
    },
    //分公司选择
    onFactoryOtherChange(res){
         this.factoryItemId = res
         this.getShopDetailList()
    },
    //分公司销量走势
    getShopDetailList(){
          var self = this
           
          var url = this.$api.MVKGetDetailList 
          this.detailListParams.shopId = this.factoryItemId
          this.$fetch({
              url: url,
              method: 'post',
              data: self.$qs.stringify(this.detailListParams)
            }).then(resData => {
              var data = resData.data.result
              self.factoryChart(data);
            }).catch(err => {
              console.log(err)
            });
    },
    //改变各分公司指标
    chagneNormalItem(res){
       
      var self = this
      this.detailListParams.queryType = res
      this.dataSourceType.forEach(item=>{
        if(res === item.value){
          if(item.label === '销量'){
            self.targetName = '吨'
          }else if(item.label === '订单量'){
            self.targetName = '单'
          }else if(item.label === '金额'){
            self.targetName = '元'
          }
        }
      })
      
       this.getShopDetailList()
    },
    changeTime(res){
      // 改变时间
      this.detailListParams.timeType = res
      this.getDetailList()
    },
    //
    onSaleChange(res){
      this.detailListParams.queryType = res
      this.getDetailList()
    },
    //获取订单量
  getDdList(xlData){
          var self = this
          var url = this.$api.MVKGetDetailList 
          self.detailListParams.queryType = '5002'
          this.$fetch({
              url: url,
              method: 'post',
              data: self.$qs.stringify(this.detailListParams)
            }).then(resData => {
              var dDlist = resData.data.result
              self.saleChart(xlData,dDlist)
            }).catch(err => {
              console.log(err)
            });
    },
    getDetailList(){
            var self = this
            this.detailListParams.shopId =''
            var url = this.$api.MVKGetDetailList 
            this.$fetch({
                url: url,
                method: 'post',
                data: self.$qs.stringify(this.detailListParams)
              }).then(resData => {
                var data = resData.data.result
                if(self.detailListParams.queryType === '5001'){
                    this.getDdList(data)
                }else{
                 self.saleChart(data,null)
                }
               
              }).catch(err => {
                console.log(err)
              });
    },
    //获取沐威科技分公司
    getDepartmentList(){
            var self = this
            var url = this.$api.MVKJGetBranchOfficeList 
            this.$fetch({
                url: url,
                method: 'post',
              }).then(resData => {
                var self = this
                var data = resData.data.result
                this.$set(this,"factoryArr",data)
                this.$set(this,"factoryItem",data[0].name)
                this.factoryItemId =  data[0].id
                this.getShopDetailList()
              }).catch(err => {
                console.log(err)
              });
    },
    //获取沐威科技整体信息
    getTotalInfo(){
            var self = this
            var url = this.$api.MVKJGetTotalInfo 
            this.$fetch({
                url: url,
                method: 'post',
              }).then(resData => {
                var self = this
                var data = resData.data.result
                var topTitleArr = this.topTitleArr
                topTitleArr[0].value = data.orderCount
                topTitleArr[1].value = data.salesVolume
                topTitleArr[2].value = data.transactionAmount
                topTitleArr[3].value = data.shopCount
                topTitleArr[4].value = data.memberCount
                this.$set(this,"topTitleArr",topTitleArr)
              }).catch(err => {
                console.log(err)
              });
    },
    //当选择完对比时间后
    onContrast(res) {
       var endTime = this.$utils.formatTime(res[1])
        var startTime = this.$utils.formatTime(res[0])
        this.detailListParams.startTime = startTime
        this.detailListParams.endTime = endTime
        this.detailListParams.timeType = '3004'
        this.daySel = '00'
        this.getDetailList()
    },
    selContrast() {
      this.contrast = !this.contrast;

      this.$set(this, "showFiltBool", this.contrast);
      if (this.contrastDate && this.contrast) {
        this.$set(this, "showFiltBool", true);
      } else {
        this.$set(this, "showFiltBool", false);
      }
    },
    factoryChart(data) {
       
      var xData = []
      var yData = []
      var legend = []
      var unit = ''
      var data1 = {
        data:[],
        type:'bar'
      }
      this.normalArr.forEach(item=>{
        if(this.normalItem === item.value){
            legend.push(item.label)
        }
      }) 
      data.forEach(item=>{
        xData.push(item.xData)
        data1.data.push(item.value)
      })
      var initData = {
        //需要给我传的数据
        xData: xData,
        yData: [data1],
        legend: legend,
        // unit:this.targetName,
        color:['#0288d1','#F5435F','#F6AB52','#01f9d3',],
        textColor: "white",
        refName: "factoryChart",
        returnOption: "factoryChartOption",
        // yAxisName: this.targetName, 
         xAxisLine:{
           axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine:{
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    saleChart(xLData,dDData) {
      var xData = []
      var yData = []
      var xLDataList = []
      var dDDataList = []
      var legend = []
      xLData.forEach((item,id)=>{
        xData.push(item.xData)
        xLDataList.push(item.value)
      })
      if(dDData != null){
            dDData.forEach(item=>{
              dDDataList.push(item.value)
            })
            var data1 ={
              data:xLDataList,
              type:'bar'
            } 
            var data2 = {
              data:dDDataList,
              type:'line'
            }
            yData = [data1,data2]
            legend = ["销量", "订单"]
            var initData = {
        //需要给我传的数据
        xData: xData,
        yData: yData,
        legend:legend ,
        textColor: "white",
        linearColor:[ //渐变颜色，
          {
          startColor:'#fec05f',
          endColor:'#ff7d4f'
        },{
          startColor:'rgba(248, 111, 57,1)',
          endColor:'rgba(248, 111, 57,0.2)'
        }
        ],//渐变色
        refName: "saleChart",
        returnOption: "saleChartOption",
        yAxisName: "销量(吨)",
        yAxis: {
          name: "订单(单)",
          type: "value",
          nameLocation: "end",
          nameTextStyle: {
            color: "white"
          },
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "white"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "white"
            }
          }
        },
        xAxisLine:{
           axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine:{
          axisLabel: {
            textStyle: {
              color: "white"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);

      }else{
        var yAxisName = ''
        var legendName = ''
         
        this.dataSourceType.forEach(item=>{
          if( this.type === item.value){
            legendName = item.label
          }
        })
        if(legendName === '金额'){
            yAxisName = '金额(元)'
        }else if(legendName === '商家'){
          yAxisName = '商家(家)'
        }
        legend.push(legendName)
         var data1 ={
              data:xLDataList,
              type:'bar'
            } 
          yData = [data1]
          var initData = {
              //需要给我传的数据
              xData: xData,
              yData: yData,
              legend:legend ,
              textColor: "white",
              linearColor:[ //渐变颜色，
                {
                startColor:'#fec05f',
                endColor:'#ff7d4f'
              },{
                startColor:'rgba(248, 111, 57,1)',
                endColor:'rgba(248, 111, 57,0.2)'
              }
              ],//渐变色
              refName: "saleChart",
              returnOption: "saleChartOption",
              yAxisName: yAxisName,
              xAxisLine:{
                axisLabel: {
                  textStyle: {
                    color: "white"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#262544"
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              },
              yAxisLine:{
                axisLabel: {
                  textStyle: {
                    color: "white"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#262544"
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              }
            };
            this.forEachFun(initData);
            }
    
      
    },
    forEachFun(initData) {
      //处理数据生成Option
      var option = this.$utils.returnItemSeries(initData);
      var self = this;
      setTimeout(function() {
        self.$refs[initData.refName].initChart();
      }, 10);

      this[initData.returnOption] = option;
    },
    fetchData(){
      this.detailListParams.queryType = '5001'
      this.getDetailList()
      this.getTotalInfo()
      this.getDepartmentList()
    }
  },
  mounted() {
    this.fetchData()
  }
};
</script>
<style>
.flexWarpCon {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  margin-top: 2em;
  padding: 0 10px 30px 10px;
}
.blockCon {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-radius: 10px;
  padding: 10px;
}
.iconHeadCon {
  text-align: center;
  width: 5em;
  height: 5em;
  border-radius: 50%;
}
.svgText {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 1rem;
  color: white;
  text-align: center;
}
.card-text-con {
  float: left;
  line-height: 2.5;
  text-align: left;
  padding: 0 20px 0 20px;
}
.col-md-1-5 {
  width: 20%;

  float: left;
}

.col-xs-1-5,
.col-sm-1-5,
.col-md-1-5,
.col-lg-1-5 {
  min-height: 1px;

  padding-left: 15px;

  padding-right: 15px;

  position: relative;
}
@media (max-width: 768px) {
  .col-xs-1-5 {
    width: 100%;

    float: left;
  }
}
@media (min-width: 768px) {
  .col-sm-1-5 {
    width: 100%;

    float: left;
  }
}

@media (min-width: 992px) {
  .col-md-1-5 {
    width: 20%;

    float: left;
  }
}

@media (min-width: 1200px) {
  .col-lg-1-5 {
    width: 20%;

    float: left;
  }
}
.topCardCon {
  color: white;
  float: left;
  width: 100%;
  height: 5em;
  padding: 1em 0;
  border-radius: 1em;
}
.topCardImg {
  float: left;
  margin-left: 5%;
  width: 5em;
  height: 5em;
  border-radius: 50%;
}
.topCardImg img {
  width: 5em;
  height: 5em;
}
.topCardTitle {
  float: left;
  width: 62%;
  text-align: right;
  line-height: 2;
}
.topCardVal {
  vertical-align: center;
  font-size: 1.5em;
}
.topCardText {
  height: 2.5em;
  line-height: 2.5em;
  vertical-align: center;
}
/* 图表 */
.tableChartCon{
  padding:10px;
  background: #151531;
  border-radius: 10px
}
/* 底部tabs页面样式 */
.corcleCon{
 padding: 22px;
 border-top: 1px solid #151531;
}
.factoryTabClass .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    background: #3b8dee;
}
.factoryTabClass .el-tabs--border-card{
  background: #262544;
}
.factoryTabClass .el-tabs__item{
  border-top-right-radius: 0;
  border-top-left-radius: 0
}
.factoryTabClass .el-tabs__nav-wrap{
  border-top-right-radius: 0;
  border-top-left-radius: 0
}
.factoryTabClass .el-tabs--border-card > .el-tabs__header{
  border-top-right-radius: 0;
  border-top-left-radius: 0
}
.myTabClass .factoryTabClass .el-tabs__nav-scroll {
    background: #262544;
    margin-bottom:0 
}
.factoryTabClass .el-tabs--border-card > .el-tabs__header .el-tabs__item{
  border-right: 1px solid #151531 ;
  color:white
}
.factoryTabClass .el-tabs__content{
  background: #262544;
  padding:0
}
</style>

